<template>
	<view class="head-view" :style="{'background':bgColor}" v-if="show">
		<view class="pa h-100 pr-3 d-flex align-items-center pl-3" style="left: 0;" @click="leftClick" v-if='showLeft'>
			<u-icon name="arrow-left" :color='bgColor=="#FFFFFF"?"#000000":"#ffffff"' size='32rpx'></u-icon>
		</view>
		<view>
			<text class="w-100 h-100 d-flex align-items-center justify-content-center fs32 fw"
				:class='bgColor=="#FFFFFF"?"#000000":"#ffffff"'>{{title}}</text>
		</view>
		<view class="h-100 d-flex align-items-center pl-3 pr-3 pa" style="right: 0;top: 0;" v-if="showRight&&isbtn">
			<u-badge type="warning" :count="count" :offset='[10,25]'></u-badge>
			<view class="br10  d-flex align-items-center justify-content-center bgWri pl-3 pr-3 fs24"
				style="height: 45rpx;color: #EF3715;">
				{{rightText}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "header-view",
		props: {
			title: {
				type: String,
				default: '',
				required: true
			},
			rightText: {
				type: String,
				default: '',
				required: false,
			},
			showRight: {
				type: Boolean,
				default: false,
				required: false,
			},
			showLeft: {
				type: Boolean,
				default: true,
			},
			isbtn: {
				type: Boolean,
				default: false,
				required: false,
			},
			count: {
				type: [String, Number],
				default: 0,
				required: false,
			},
			bgColor: {
				type: String,
				default: () => {
					return ''
				},
				required: false
			}
		},
		data() {
			return {
				show: false,
			}
		},
		mounted() {
			// #ifdef H5
			this.show = true
			//如果在微信小程序或者客户端内时隐藏头部
			let inMini = window.__wxjs_environment === 'miniprogram'
			if (inMini) {
				this.show = false
			}
			// 被webview包的隐藏
			if (window.self != window.top) {
				this.show = false
			}
			var ua = navigator.userAgent;
			if (ua.indexOf('Html5Plus') > -1) {
				this.show = false
			}
			// #endif
		},
		methods: {
			leftClick() {
				let routes = getCurrentPages();
				let surRoute = routes[routes.length - 2]
				if (surRoute || surRoute == undefined) {
					// this.$emit('leftClick')
					uni.navigateBack({
						delta: 1
					})
				} else {
					history.back()
				}
			},
			rightClick() {
				this.$emit('rightClick')
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.show = true
			// #endif
			// #ifdef MP-WEIXIN
			this.show = false
			// #endif
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.head-view {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
</style>